<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spirit8</title>

    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <link rel="stylesheet/less" href="./assets/css/reset.less" />
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>

<body>
    <!-- 头部 -->
    <header class="header navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand logo wow fadeInLeft" href="javascript:void(0)">Spirit8</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="wow fadeInDownBig">HOME</a></li>
                    <li><a class="wow fadeInDownBig" data-wow-delay="50ms" href="javascript:void(0)">ABOUT</a></li>
                    <li><a class="wow fadeInDownBig" data-wow-delay="100ms" href="javascript:void(0)">SERVICES</a></li>
                    <li><a class="wow fadeInDownBig" data-wow-delay="150ms" href="javascript:void(0)">PORTFOLIO</a></li>
                    <li><a class="wow fadeInDownBig" data-wow-delay="200ms" href="javascript:void(0)">TESTIMONIALS</a>
                    </li>
                    <li><a class="wow fadeInDownBig" data-wow-delay="250ms" href="javascript:void(0)">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </header>

    <!-- banner图 -->
    <div class="banner">
        <!-- 标题 -->
        <div class="text1 wow pulse">
            welcome on <span>spirit8</span>
        </div>

        <!-- 段落 -->
        <div class="text2 wow tada">
            We are a digital agenoy with
            <span> years of experlence and with</span>
            <span>extraordinary people</span>
        </div>

        <!-- 更多 -->
        <div class="more wow slideInDown" data-wow-delay="200ms">
            <a href="#foot">↓</a>
        </div>
    </div>

    <!-- 关于我们 -->
    <div class="about">
        <div class="container">
            <div class="left">
                <img src="./assets/images/about-background.png" alt="">
            </div>

            <div class="right">
                <div class="top">About us</div>
                <div class="bottom"><span>SOME</span> WORLDS <span>About us</span> </div>

                <div class="wenben">
                    We love building and rebuilding brands through our specific skills.
                    Using colour, fonts, and illustration, we brand companies in a way
                    they will never forget.
                </div>

                <ul class="liebiao">
                    <li>
                        <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                        <span>Mission</span>
                        - We deliver uniqueness and quality
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                        <span>Skills</span>
                        - Delivering fast and excellent results
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                        <span>Clients</span>
                        - Satisfied clients thanks to our experience
                    </li>
                </ul>

                <div class="tubiao">
                    <span class="glyphicon glyphicon-film" aria-hidden="true"></span>
                    <span>Browse our work</span>
                </div>
            </div>
        </div>
    </div>

    <!-- team -->
    <div class="team">
        <div class="container">
            <h3 class="title" data-wow-delay="100ms">
                Meet <span>our team</span>
            </h3>

            <div class="list">
                <div class="item">
                    <div class="image">
                        <img src="./assets/images/cover.png" class="wow fadeInUp" data-wow-delay="200ms">
                    </div>

                    <div class="font">
                        <h1 class="wow fadeInUp" data-wow-delay="300ms">Jason Statham</h1>
                        <h4 class="wow fadeInUp" data-wow-delay="400ms">Knife designer</h4>
                        <p class="wow fadeInUp" data-wow-delay="500ms">
                            Do not seek to change what has come before. Seek to
                            create that which has not.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="./assets/images/cover.png" class="wow fadeInUp" data-wow-delay="200ms">
                    </div>

                    <div class="font">
                        <h1 class="wow fadeInUp" data-wow-delay="300ms">Van Damme
                        </h1>
                        <h4 class="wow fadeInUp" data-wow-delay="400ms">No English</h4>
                        <p class="wow fadeInUp" data-wow-delay="500ms">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        </p>
                    </div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="./assets/images/cover.png" class="wow fadeInUp" data-wow-delay="200ms">
                    </div>

                    <div class="font">
                        <h1 class="wow fadeInUp" data-wow-delay="300ms">Sylvester Stallone</h1>
                        <h4 class="wow fadeInUp" data-wow-delay="400ms">Cigar Lover</h4>
                        <p class="wow fadeInUp" data-wow-delay="500ms">
                            Do not seek to change what has come before. Seek to
                            create that which has not.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="./assets/images/cover.png" class="wow fadeInUp" data-wow-delay="200ms">
                    </div>

                    <div class="font">
                        <h1 class="wow fadeInUp" data-wow-delay="300ms">Jet Li</h1>
                        <h4 class="wow fadeInUp" data-wow-delay="400ms">I need more money</h4>
                        <p class="wow fadeInUp" data-wow-delay="500ms">
                            Do not seek to change what has come before. Seek to
                            create that which has not.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- take -->
    <div class="tea">
        <div class="container">
            <h1 class="ti" data-wow-delay="100ms">
                take a look at<span> our services</span>
            </h1>
            <p class="wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
                Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance. The
                first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </p>
            <div class="lis">
                <div class="it">
                    <div class="image">
                        <img src="./assets/images/01.png" class="wow fadeInUp" data-wow-delay="200ms">
                    </div>

                    <div class="font">
                        <h1 class="wow fadeInUp" data-wow-delay="300ms">Web&nbsp;design</h1>
                        <p class="wow fadeInUp" data-wow-delay="500ms">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </p>
                    </div>
                </div>

                <div class="it">
                    <div class="image">
                        <img src="./assets/images/02.png" class="wow fadeInUp" data-wow-delay="200ms">
                    </div>

                    <div class="font">
                        <h1 class="wow fadeInUp" data-wow-delay="300ms">Mobile&nbsp;apps</h1>
                        <p class="wow fadeInUp" data-wow-delay="500ms">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </p>
                    </div>
                </div>
                <div class="it">
                    <div class="image">
                        <img src="./assets/images/03.png" class="wow fadeInUp" data-wow-delay="200ms">
                    </div>

                    <div class="font">
                        <h1 class="wow fadeInUp" data-wow-delay="300ms">PHOTOGRAPHY</h1>
                        <p class="wow fadeInUp" data-wow-delay="500ms">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </p>
                    </div>
                </div>
                <div class="it">
                    <div class="image">
                        <img src="./assets/images/04.png" class="wow fadeInUp" data-wow-delay="200ms">
                    </div>

                    <div class="font">
                        <h1 class="wow fadeInUp" data-wow-delay="300ms">marketing</h1>
                        <p class="wow fadeInUp" data-wow-delay="500ms">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- some -->
    <div class="some">
        <div class="title wow fadeInUp" data-wow-delay="100ms">
            <h2 class="one">SOME OF <span>OUR CLTENTS</span></h2>
        </div>
        <div class="text wow fadeInUp" data-wow-delay="200ms">
            <h6 class="two">ZARA GUERLAIN LANCOME <span>LACOSTE</span> </h6>
        </div>
        <div class="but wow fadeInUp" data-wow-delay="300ms">
            <button class="color"></button>
            <button class="color"></button>
            <button class="color"></button>
        </div>
    </div>

    <!-- look -->
    <div class="take">
        <div class="box">
            <div class="top wow fadeInUp" data-wow-delay="1s">
                <h1 class="text">take a look at <span>our work</span></h1>
            </div>
            <p class="text wow fadeInUp" data-wow-delay="2s">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
                Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance.
                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </p>
            <div class="list wow fadeInUp" data-wow-delay="300ms">
                <div class="left">
                    Filter by type
                </div>
                <div class="right wow fadeInUp" data-wow-delay="400ms">
                    <a href="javascript:void(0)">All |</a>
                    <a href="javascript:void(1)">Web design |</a>
                    <a href="javascript:void(2)">Mobile design |</a>
                    <a href="javascript:void(3)">Photograpy</a>
                </div>
                <select class="choose">
                    <option>请选择</option>
                    <option>All</option>
                    <option>Web design</option>
                    <option>Mobile design</option>
                    <option>Photograpy</option>
                </select>
            </div>
            <div class="picture">
                <!-- 第一列 -->
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                
                <!-- 第二列 -->
                 <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img2.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img2.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img2.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img2.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <!-- 第三列 -->
                 <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img3.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img3.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img3.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="one">
                        <img src="./assets/images/work-img3.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!-- testimonials -->
    <div class="testimonials">
        <div class="title wow fadeInUp" data-wow-delay="100ms">
            <h2 class="one">our clients’ <span>testimonials</span></h2>
        </div>
        <div class="text wow fadeInUp" data-wow-delay="200ms">
            <h6 class="two">This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line
                    of Lorem Ipsum,
                    "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</h6>
        </div>
        <h3 class="three wow fadeInUp" data-wow-delay="300ms">Dean Martin, CEO Acme Inc.</h3>
        <div class="but wow fadeInUp" data-wow-delay="400ms">
            <button class="color"></button>
            <button class="color"></button>
            <button class="color"></button>
        </div>
    </div>

    <!-- feel  -->
     <div class="feel">
        <div class="box">
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                <h1 class="text">feel free to<span> contact us</span></h1>
            </div>
            <p class="wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance.</p>
            <div class="top">
                <form name="top">
                    <div class="first wow fadeInUp" data-wow-delay="300ms">
                        <div class="one">
                            <h1>Name<sup>*</sup></h1>
                            <div class="input">
                                <input type="text" name="username" placeholder="请输入用户名称" required />
                            </div>
                        </div>
                        <div class="one">
                            <h1>Email Address<sup>*</sup></h1>
                            <input type="text" name="username" placeholder="请输入邮箱" required>
                        </div>
                    </div>
                    <div class="second wow fadeInUp" data-wow-delay="400ms">
                        <div class="two">
                            <h1>Message<sup>*</sup></h1>
                            <!-- <input type="text" name="username" placeholder="请输入内容" required /> -->
                            <textarea name="username" placeholder="请输入内容"></textarea>
                        </div>
                    </div>
                    <div class="third wow fadeInUp" data-wow-delay="500ms">
                        <button class="three wow fadeInUp" data-wow-delay="500ms">SEND</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- bottom -->
    <div class="bott">
        <div class="box">
                <h1 class="left wow fadeInUp" data-wow-delay="100ms">
                    ALL RIGHTS RESERVED. COPYRIGHT ©
                    <span>2014 SPIRIT8</span>
        </h1>
                <div class="right">
                    <a class="wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(1)">
                        <img src="./assets/images/footer2.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="300ms" href="javascript:void(2)">
                        <img src="./assets/images/footer3.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(3)">
                        <img src="./assets/images/footer4.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(4)">
                        <img src="./assets/images/footer5.png" />
                    </a>
                </div>
        </div>
    </div>
</body>

</html>

<!-- 加载less解析器 -->
<script src="./assets/js/less.min.js"></script>

<!-- 先加载jquery 在加载 bootstrap -->
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 加载懒加载插件 -->
<script src="./assets/js/wow.min.js"></script>

<script>
    // 懒加载的初始化
    new WOW().init()
</script>